<script setup></script>

<template>
  <div class="ml-4 mt-4">
    <div class="mb-4">
      <el-button>默认按钮</el-button>
      <el-button size="medium">中等按钮</el-button>
      <el-button size="small">小型按钮</el-button>
      <el-button size="mini">超小按钮</el-button>
    </div>
    <div class="mb-4">
      <el-button type="primary">常规按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </div>
    <div class="mb-4">
      <el-button type="primary" :plain="true">描边</el-button>
      <el-button type="primary" :round="true">圆角</el-button>
      <el-button type="primary" :circle="true">圆形</el-button>
      <el-button type="primary" :disable="true">禁用</el-button>
      <el-button type="primary" :loading="true">加载</el-button>
    </div>
    <div class="mb-4">
      <el-button type="primary"
        ><el-icon><Share /></el-icon
      ></el-button>
      <el-button type="primary"
        ><el-icon><Delete /></el-icon
      ></el-button>
      <el-button type="primary"
        ><el-icon><Search /></el-icon>图标在前</el-button
      >
      <el-button type="primary">
        图标在后<el-icon class="el-icon--right"><Upload /></el-icon>
      </el-button>
    </div>
    <el-tag class="mr-4">普通标签</el-tag>
    <el-tag :hit="true" class="mr-4">描边标签</el-tag>
    <el-tag color="purple">紫色背景标签</el-tag>
    <div class="mt-4">
      <el-check-tag :checked="true" class="mr-4">足球</el-check-tag>
      <el-check-tag :checked="false">篮球</el-check-tag>
    </div>
    <el-empty description="设置空态图的描述文案" :image-size="100"></el-empty>
    <el-empty>
      <!-- image具名插槽用来替换默认的图片部分 -->
      <template #image>
        <img src="http://huishao.cc/img/head-img.png" />
      </template>
      <!-- description具名插槽用来替换默认的描述部分 -->
      <template #description>
        <div>描述文案</div>
      </template>
      <!--默认的插槽用来在空态图的尾部追加内容-->
      <el-button>看看其它按钮</el-button>
    </el-empty>

    <el-skeleton :rows="10" :animated="true"></el-skeleton>

    <el-skeleton :animated="true">
      <template #template>
        <el-skeleton-item variant="h1" style="width: 100px; height: 30px; padding: 0" />
        <el-skeleton-item variant="image" style="width: 240px; height: 240px; padding: 0" />
        <el-skeleton-item variant="p" style="width: 30%; padding: 0; margin-top: 20px" />
        <el-skeleton-item variant="p" style="width: 90%; padding: 0" />
        <el-skeleton-item variant="p" style="width: 90%; padding: 0" />
      </template>
    </el-skeleton>
    <el-image style="width: 500px" src="http://huishao.cc/img/head-img.png"></el-image>

    <el-image style="width: 500px" src="http://huishao.cc/img/head-img.png">
      <template #error>
        <div class="image-slot">加载失败</div>
      </template>
      <template #placeholder>
        <div class="image-slot">加载中</div>
      </template>
    </el-image>

    <div>
      <!-- 使用文本类型的头像 -->
      <el-avatar style="margin: 20px"> 用户 </el-avatar>
      <!-- 使用图标类型的头像 -->
      <el-avatar style="margin: 20px">
        <el-icon><User /></el-icon>
      </el-avatar>
      <!-- 使用图片类型的头像 -->
      <el-avatar style="margin: 20px" :size="100" src="http://huishao.cc/img/avatar.jpg">
      </el-avatar>
      <el-avatar style="margin: 20px" src="http://huishao.cc/img/avatar.jpg" fit="fill">
      </el-avatar>
      <el-avatar style="margin: 20px" shape="square" src="http://huishao.cc/img/avatar.jpg">
      </el-avatar>
    </div>
  </div>
</template>
